<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="img/icon.png" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>GPG pubKey Index</title>
  <style>
    :root {
      --brand:#005f99;
      --text:#333;
      --bg:#f4f6f8;
      --card:#fff;
      --muted:#fafafa;
      --border:#e5e7eb;
      --banner-h: 168px;
      --content-width: 1080px;
    }
    * { box-sizing:border-box }
    body {
      font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
      margin:0;
      display:flex;
      flex-direction:column;
      min-height:100vh;
    }
    header {
      height:var(--banner-h);
      background:var(--brand);
      color:#fff;
      text-align:center;
      position:relative;
      box-shadow:0 2px 6px rgba(0,0,0,.2);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }
    header h1 { margin:.25rem 0 0;font-size:2rem;line-height:1.2 }
    header p { margin:.5rem 0 0;font-size:1rem;line-height:1.3 }
    header code {
      background:rgba(255,255,255,.15);
      color:#fff;
      padding:.2rem .4rem;
      border-radius:4px;
    }

    .lang-switch {
      position:absolute;
      top:1rem;
      right:2rem;
      width:180px;
      height:42px;
      border-radius:999px;
      background:rgba(255,255,255,.28);
      backdrop-filter:saturate(150%) blur(2px);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
      cursor:pointer;
    }
    .lang-switch::before, .lang-switch::after {
      position:absolute;
      z-index:2;
      top:0; bottom:0;
      display:flex; align-items:center; justify-content:center;
      width:50%;
      font-size:.95rem; white-space:nowrap;
      color:#fff; font-weight:500;
      pointer-events:none;
    }
    .lang-switch::before{ left:0; content:"中文"; }
    .lang-switch::after{ right:0; content:"English"; }
    .seg-indicator {
      position:absolute;
      z-index:1;
      top:5px; bottom:5px;
      left:5px;
      width:calc(50% - 10px);
      background:#fff;
      border-radius:999px;
      box-shadow:0 1px 4px rgba(0,0,0,.25);
      transition: left .35s cubic-bezier(.4,0,.2,1);
    }
    .lang-switch.zh .seg-indicator{ left:5px; }
    .lang-switch.en .seg-indicator{ left:calc(50% + 5px); }
    .lang-switch.zh::before{ color:var(--brand); font-weight:700; }
    .lang-switch.en::after{ color:var(--brand); font-weight:700; }

    main {
      flex:1;
      width:100%;
      max-width:var(--content-width);
      margin:1.5rem auto 2rem;
      padding:1.25rem 1.5rem 1.5rem;
      background:var(--card);
      border-radius:16px;
      box-shadow:0 2px 8px rgba(0,0,0,.08);
    }
    details {
      margin:1rem 0;
      border:1px solid var(--border);
      border-radius:10px;
      background:var(--muted);
      padding:.6rem 1rem;
    }
    summary {
      list-style:none;
      font-weight:700;
      cursor:pointer;
      font-size:1.05rem;
      position:relative;
      padding-left:1.25rem;
    }
    summary::before {
      content:"▶";
      position:absolute;
      left:0;
      transition:transform .2s ease;
      font-size:.95rem;
    }
    details[open] summary::before { transform:rotate(90deg); }

    summary .author-dir {
      margin-left:1em;
      font-size:.85rem;
      color:var(--brand);
      text-decoration:none;
      cursor:pointer;
    }
    summary .author-dir:hover { text-decoration:underline; }

    ul { list-style:none; padding-left:1.2rem; margin:.5rem 0 0 }
    li { margin:.35rem 0 }
    a { color:var(--brand); text-decoration:none }
    a:hover { text-decoration:underline }

    .desc { margin:.25rem 0 1rem; color:#555; font-size:.95rem; }

    footer {
      background:var(--brand);
      color:#fff;
      text-align:center;
      padding:1rem;
      font-size:.9rem;
      margin-top:auto;
      box-shadow:0 -2px 6px rgba(0,0,0,.15);
    }
    footer a{ color:#fff; font-weight:600; text-decoration:none; }
    footer span.sep{ margin:0 0.8em; color:rgba(255,255,255,0.7); }

    #toast{ position:fixed; left:50%; bottom:80px; transform:translateX(-50%) translateY(20px); background:rgba(0,0,0,.8); color:#fff; padding:.5rem .75rem; border-radius:8px; font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
    #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  </style>
</head>
<body>
  <header>
    <div class="lang-switch zh" id="langSwitch">
      <div class="seg-indicator"></div>
    </div>
    <h1 data-zh="GPG 公钥索引" data-en="GPG Public Key Index">GPG 公钥索引</h1>
    <p>
      <span data-zh="目录结构：" data-en="Directory Structure:">目录结构：</span>
      <code data-zh="/作者/公钥.asc" data-en="/Author/public.asc">/作者/KeyID/公钥.asc</code>
    </p>
  </header>

  <main>
    <p class="desc" data-zh="此索引存放 GPG 公钥 | 根据 ‘作者 → KeyID → 公钥’ 组织，点击作者可展开其密钥列表；单击 ‘复制’ 可复制该作者目录链接。"
                data-en="This index stores GPG public keys | Organized by Author → KeyID → Public Key, click an author to expand the list of keys; Click Copy to copy the author directory link.">
      这里存放个人 GPG 公钥。按照作者 → KeyID 组织，点击作者可展开其密钥列表。
    </p>

    <!-- 内容 -->
    <details open>
      <summary>
        <span data-zh="总索引" data-en="General Index">总索引</span>
        <a class="author-dir" data-copy="abs" data-zh="复制" data-en="Click Copy" data-path="PubKey/ALL" href="#">复制</a>
      </summary>
      <ul>
        <li>B729A60C613F85A0 → <a href="PubKey/ALL/Yan (YanAnghelp)_0xB729A60C613F85A0_public.asc">Yan (YanAnghelp).asc</a></li>
        <li>FBF9F444779EF50A → <a href="PubKey/BINGO/BinGo Lab_0xFBF9F444779EF50A_public.asc">BinGo Lab.asc</a></li>
      </ul>
    </details>

    <details>
      <summary>
        <span data-zh="YanAnghelp" data-en="YanAnghelp">YanAnghelp</span>
        <a class="author-dir" data-copy="abs" data-zh="复制" data-en="Click Copy" data-path="PubKey/YanAnghelp" href="#">复制</a>
      </summary>
      <ul>
        <li>B729A60C613F85A0 → <a href="PubKey/YanAnghelp/Yan (YanAnghelp)_0xB729A60C613F85A0_public.asc">Yan (YanAnghelp).asc</a></li>
      </ul>
    </details>

    <details>
      <summary>
        <span data-zh="二进社" data-en="BinGo Lab">BinGo Lab</span>
        <a class="author-dir" data-copy="abs" data-zh="复制" data-en="Click Copy" data-path="PubKey/BINGO" href="#">复制</a>
      </summary>
      <ul>
        <li>FBF9F444779EF50A → <a href="PubKey/BINGO/BinGo Lab_0xFBF9F444779EF50A_public.asc">BinGo Lab.asc</a></li>
      </ul>
    </details>

    <!-- 内容结束 -->

    <div id="toast" role="status" aria-live="polite">已复制链接</div>
  </main>

  <footer>
    Copyright © 2025 <a href="https://github.com/YanAnghelp" target="_blank">YanAnghelp</a>
    <span class="sep">•</span>
    Source on <a href="https://github.com/YanAnghelp/GPG_publicKey" target="_blank">GitHub</a>
    <span class="sep">•</span>
    Released under <a href="https://unlicense.org" target="_blank">The Unlicense</a>
  </footer>

  <script>
    const PERSIST_KEY = "gpg-index-lang";
    const switcher = document.getElementById("langSwitch");
    const els = document.querySelectorAll("[data-zh]");

    function applyLang(lang){
      els.forEach(el => {
        const txt = el.getAttribute("data-" + lang);
        if (txt != null) el.textContent = txt;
      });
      const isZH = lang === "zh";
      switcher.classList.toggle("zh", isZH);
      switcher.classList.toggle("en", !isZH);
      document.documentElement.setAttribute("lang", isZH ? "zh-CN" : "en");
      try { localStorage.setItem(PERSIST_KEY, lang); } catch(e){}
    }

    switcher.addEventListener("click", () => {
      const next = switcher.classList.contains("zh") ? "en" : "zh";
      applyLang(next);
    });

    (function init(){
      let lang = "zh";
      try {
        lang = localStorage.getItem(PERSIST_KEY) || (document.documentElement.lang?.startsWith("en") ? "en" : "zh");
      } catch(e){}
      applyLang(lang);
    })();

    // 复制逻辑
    (function(){
      if (window.__copyInit) return; window.__copyInit = true;
      const toastEl = document.getElementById('toast');
      function showToast(msg){
        if(!toastEl) return;
        toastEl.textContent = msg;
        toastEl.classList.add('show');
        clearTimeout(showToast.tid);
        showToast.tid = setTimeout(()=>toastEl.classList.remove('show'), 1200);
      }
      document.addEventListener('click', async (e)=>{
        const a = e.target.closest('a.author-dir[data-copy="abs"]');
        if(!a) return;
        e.preventDefault();
        const rel = a.getAttribute('data-path') || '';
        const abs = new URL(rel, location.href).href;
        try{
          await navigator.clipboard.writeText(abs);
          const isZH = document.documentElement.lang !== 'en';
          showToast(isZH ? '已复制链接' : 'Link copied');
        }catch(err){
          const ta = document.createElement('textarea');
          ta.value = abs; document.body.appendChild(ta); ta.select();
          try{ document.execCommand('copy'); }catch(e){}
          document.body.removeChild(ta);
          const isZH = document.documentElement.lang !== 'en';
          showToast(isZH ? '已复制链接' : 'Link copied');
        }
      });
    })();
  </script>
</body>
</html>
